<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../plugins/echarts/echarts.js"></script>
</head>
<body>
<div class="box">
<div id="chart1" style="height:600px;"></div>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>

<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('chart1'));
    axios.post("/report/findCountOfOrder.do").then((res)=>{
        option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: /*[
                    ['product', '2015', '2016', '2017'],
                    ['Matcha Latte', 43.3, 85.8, 93.7],
                    ['Milk Tea', 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 72.4, 53.9, 39.1]
                ]*/
                res.data.data
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };
        myChart1.setOption(option);
    })

</script>
</html>